<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>排班表</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/main.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			.mui-input-group:first-child {
				margin-top: 20px;
			}

			.mui-input-group label {
				width: 22%;
			}

			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
				height: 0.9rem;
				font-size: 14px;
			}

			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}

			.mui-content-padded {
				margin-top: 25px;
			}

			#reg {
				padding: 10px;
				border-radius: 20px;
				width: 100%;
				margin: 0 auto;
				height: 0.9rem;
			}

			#reg span {
				font-size: 18px;
			}

			.mui-input-group {
				background: none;
			}

			.mui-input-group:before,
			.mui-input-group:after {
				height: 0;
			}

			.mui-input-group input {
				background-color: #FFFFFF !important;
				width: 95% !important;
				border-radius: 25px !important;
				margin: 10px 0 10px 0 !important;
				padding-left: 55px !important;
				float: inherit !important;
			}

			.mui-input-group .mui-input-row:after {
				height: 0;
			}

			.mui-input-group .mui-input-row {
				text-align: center;
			}

			.mui-input-group .mui-input-row {
				height: inherit;
			}

			p {
				font-size: 14px;
				margin-top: 20px;
				margin-bottom: 10px;
				color: #8f8f94;
			}

			p a {
				color: #000000;
				padding: 0 20px;
			}

			.mui-content {
				background: none;
			}

			#showUserPicker {
				float: inherit;
				width: 87%;
				padding: 10px 15px;
			}

			#yanzhengBtn {
				position: absolute;
				top: 20px;
				right: 35px;
				background: #ffcc99;
				border: 0;
				border-radius: 20px;
			}

			.mui-input-group .labelL {
				position: absolute;
				top: 5px;
				left: -5px;
				z-index: 99;
			}

			.mui-input-group .labelL img {
				width: 0.5rem;
				vertical-align: -webkit-baseline-middle;
			}

			.mui-input-group .labelR {
				position: absolute;
				top: 10px;
				right: 0px;
				z-index: 99;
			}

			.mui-input-group .labelR img {
				width: 0.2rem;
				vertical-align: -webkit-baseline-middle;
			}

			.mui-content-padded .mui-btn {
				background-color: #718fbd !important;
			}

			.mui-input-row p {
				color: #000 !important;
			}

			.mui-input-row span {
				color: #fcbeaf;
			}

			.mui-content-padded {
				margin-top: 66px !important;
			}
			.mui-btn-primary {
    			border: 1px solid #fcb565;
   				background: #fcb565 !important;
			}
			.mui-content-padded .mui-btn {
    			background-color: #fcb565 !important;
			}
			.mui-card {
				margin-top: 40px;
			}
			.mui-content .mui-table-view-cell{
				background-color: #fff;
				margin-bottom:5px;
			}
			.mui-content .mui-table-view-cell .mui-table {
				text-align: center;
				/*background-color: #fff;*/
			}
			.mui-content .mui-table-view-cell .mui-table p {
				    font-size: 14px;
    				margin-top: 0px;
   					 margin-bottom: 0px;
    				color: #333333;
			}


			/*表格的样式*/
			table {
    /*border: 1px solid #ccc;*/
    width: 100%;
    margin: 0;
    padding: 0;
     border-collapse:collapse;
    border-colla<a href="/fw/photo.html" target="_blank">ps</a>e: collapse;

}
	table tr {
    /*border: 1px solid #ddd;*/
    padding: 1px;
	}
table th,
table td {
	font-size: 0.3em;
    padding: 2px;
    text-align: center;
     border: 1px solid #7a7a7a;
      border-collapse:collapse;
      background-color: #ffffff;

}
table th {
    text-transform: uppercase;
    font-size: 0.3em;
    letter-spacing: 1px;
    background-color: #ffffff;
}
/* <= 568px */
@media screen and (min-width: 720px) and (max-width:1200px) {
    table {
        border: 1px solid #7a7a7a;
        background-color: #ffffff;

        border-collapse:collapse;
        margin-top:5px !important;
    }
    ​
table, td, th {
    border: 1px solid #7a7a7a;
}
    table thead {
        /*display: none;*/
    }
    table tr {
       /* margin-bottom: 10px;*/
        display: inline-block;
        /*border-bottom: 1px solid #7a7a7a;*/
        background-color: #ffffff;


    }

    table td {
    	/*padding: 0 5px 0 6px;*/
        display: inline-block;
        text-align: right;
        font-size: 0.3em;
        /*border-bottom: 1px dotted #ccc;*/
        background-color: #ffffff;
        border: 1px solid #7a7a7a;
        font-size: 0.3em;

    }
    table td:last-child {
        border-bottom: 0;
    }
    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}


		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">排班表</h1>
		</header>

		<div class="mui-content " id="content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed tableUL" id='addressmessage'>
				<li class="mui-table-view-cell">
					<a href="#" class="">
						<div class="mui-table">
							<p>输入排版表（护士手动设置，未来一周时间排版情况）</p>
							<p>白班时间：8:00-16:30，夜班时间：16:30-8:00</p>
						</div>
					</a>
				</li>

			</ul>


		   <table  class="">
      			<thead>
        			<tr>
          				<th>09/11   星期一</th>
         				<th>09/11  星期一</th>
          				<th>09/11  星期一</th>
          				<th>09/11  星期一</th>
          				<th>09/11  星期一</th>
          				<th>09/11  星期一</th>
          				<th>09/11  星期一</th>
        			</tr>
      			</thead>
      			<tbody>
       				 <tr>
          				<td><input type="radio" name="one" value="11">白班</td>
			<td><input type="radio" name="two" value="12">白班</td>
			<td><input type="radio" name="three" value="13">白班</td>
			<td><input type="radio" name="four" value="14">白班</td>
			<td><input type="radio" name="five" value="15">白班</td>
			<td><input type="radio" name="six" value="16">白班</td>
			<td><input type="radio" name="seven" value="17">白班</td>
       				 </tr>
        			 <tr>
          				<td><input type="radio" name="one" value="21">夜班</td>
			<td><input type="radio" name="two" value="22">夜班</td>
			<td><input type="radio" name="three" value="23">夜班</td>
			<td><input type="radio" name="four" value="24">夜班</td>
			<td><input type="radio" name="five" value="25">夜班</td>
			<td><input type="radio" name="six" value="26">夜班</td>
			<td><input type="radio" name="seven" value="27">夜班</td>
        			 </tr>

     			</tbody>
    		</table>









			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary "><span>保存</span></button>
			</div>
		</div>








		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/xiangyingshi.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" src="../js/constants.js"></script>
		<script type="text/javascript" src="../js/sharemethods.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/json_time.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script>
			mui.plusReady(function() {

				var topoffset = '45px';
				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
					document.querySelector("header").style.height = topoffset;
					document.querySelector("header").style.paddingTop = "20px";
					document.getElementById('content').style.paddingTop = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + "px";

				}
				// 加载完毕后关闭等待框，并展示页面
				var currentView = plus.webview.currentWebview();
				currentView.show('slide-in-right', 200);
				plus.nativeUI.closeWaiting();
			});
		var obj={

		};
		 $("input[name=one]").on('click',function(){
           		if($(this).prop("checked")){
                obj.one=$(this).val();
                console.log(obj.one);
           		}
       		});
		  $("input[name=two]").on('click',function(){
           		if($(this).prop("checked")){
                obj.two=$(this).val();
                console.log(obj.two);
           		}
       		});
		   $("input[name=three]").on('click',function(){
           		if($(this).prop("checked")){
                obj.three=$(this).val();
                console.log(obj.three);
           		}
       		});
		    $("input[name=four]").on('click',function(){
           		if($(this).prop("checked")){
                obj.four=$(this).val();
                console.log(obj.four);
           		}
       		});
       		 $("input[name=five]").on('click',function(){
           		if($(this).prop("checked")){
               obj.five=$(this).val();
                console.log(obj.five);
           		}
       		});
       		  $("input[name=six]").on('click',function(){
           		if($(this).prop("checked")){
                obj.six=$(this).val();
                console.log(obj.six);
           		}
       		});
       		   $("input[name=seven]").on('click',function(){
           		if($(this).prop("checked")){
               obj.seven=$(this).val();
                console.log(obj.seven);
           		}
       		});

		 $("button").on("click",function(){
		 	console.log(obj);
		 })
		 
		 
		 
	</script>
	</body>

</html>